<template>
  <view class="sidebar-view">
    <sider-icon :is-active.sync="isShowSidebar"></sider-icon>
    <view v-if="isShowSidebar">
      <view class="mask" @click="setSidebarHidden"></view>
      <view class="siderbar animation-fade">
        <view
          class="siderbar__item"
          @click="$u.route({ url: '/pages/home/audit' })"
          v-if="isAdmin"
        >
          <view class="label">审核</view>
          <image src="/static/image/vip.svg" mode="widthFix"></image>
        </view>
        <view
          class="siderbar__item"
          @click="$u.route({ url: '/pages/question/collect' })"
        >
          <view class="label">收藏</view>
          <image src="/static/image/home/collect.svg" mode="widthFix"></image>
        </view>
        <button class="siderbar__item" open-type="contact">
          <view class="label">客服</view>
          <image src="/static/image/home/service.svg" mode="widthFix"></image>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import SiderIcon from "./SiderIcon"
import { mapGetters } from "vuex"

export default {
  components: { SiderIcon },
  data() {
    return {
      isShowSidebar: false,
    }
  },
  computed: {
    ...mapGetters("user", ["isAdmin"]),
  },
  methods: {
    setSidebarHidden() {
      this.isShowSidebar = false
    },
    onClickAction(actionName) {
      this.setSidebarHidden()
      if (actionName === "wrong") {
        uni.showToast({ title: "七月初上线!", icon: "none" })
        return
      }
      uni.navigateTo({
        url: {
          collect: `/pages/question/collect`,
        }[actionName],
      })
    },
  },
}
</script>

<style lang="scss" scope>
.sidebar-view {
  position: relative;
  .siderbar {
    position: absolute;
    top: 0rpx;
    left: 100rpx;
    z-index: 20;

    &__item {
      display: flex;

      margin-bottom: 15rpx;
      border-radius: 10px;
      padding: 10rpx 20rpx;
      width: 100px;
      height: 40px;

      font-size: 32rpx;

      color: black;
      background: #ecf0f3;

      box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;

      transition: box-shadow 0.3s ease !important;

      align-items: center;
      justify-content: space-between;
      image {
        width: 40rpx;
      }
      &:hover {
        background-color: #e6e9ef;

        box-shadow: inset -12px -12px 30px 5px rgba(255, 255, 255, 0.9),
          inset 12px 12px 30px 5px rgba(50, 58, 73, 0.2) !important;
      }
      &::after {
        border: none !important;
      }
    }
  }
  .mask {
    position: absolute;
    top: 0;
    left: -10vw;
    z-index: 10;

    width: 110vw;
    height: 100vh;

    background: transparent;
  }
}
</style>
